<template>
  <div class="form-box">
    <span class="form-title">{{ title }}</span>
    <span class="form-toggle" :class="{ active: toggle }" @click="handleToggle" v-if="showToggle"
      ><DownOutlined />{{ toggle ? '收起' : '展开' }}历史月份</span
    >
  </div>
</template>

<script setup lang="ts" name="FormTitle">
  import { ref } from 'vue';
  import { DownOutlined } from '@ant-design/icons-vue';
  defineProps({
    title: {
      type: String,
      default: '标题',
    },

    showToggle: {
      type: Boolean,
      default: false,
    },
  });

  const $emit = defineEmits(['change']);

  const toggle = ref<boolean>(false);

  const handleToggle = () => {
    toggle.value = !toggle.value;
    $emit('change', toggle.value);
  };
</script>

<style lang="less" scoped>
  .form-box {
    display: flex;
    justify-content: space-between;
    margin: 32px 16px 0;
    padding: 0 6px;

    .form-title {
      font-size: 16px;
      color: #3d3d3d;
      font-weight: 600;
      display: flex;
      align-items: center;

      &:before {
        content: '';
        display: block;
        width: 4px;
        height: 14px;
        background: #1153d8;
        margin-right: 8px;
      }
    }

    .form-toggle {
      font-size: 14px;
      color: #1153d8;
      cursor: pointer;

      .anticon-down {
        transition: all 0.3s;
      }
    }

    .active {
      .anticon-down {
        transform: rotate(-180deg);
      }
    }
  }
</style>
